<template>
  <div class="main">
    <div class="header">
      当前已设网点：
      <span class="blue">{{ (initData.type === 0 ? initData.parkName : initData.returnCarParkName) || '暂未设置网点' }}</span>
      <span class="input-info">* 不选中列表网点数据直接点确认，则为取消绑定当前网点</span>
    </div>
    <c-table
      ref="cTable"
      selection
      hasBorder
      :size="size"
      :max-height="448"
      :loading="isLoading"
      :table-header="tableHeader"
      :table-list="tableList"
      :page-info="pageInfo"
      :table-inner-btns="tableInnerBtns"
      @change-pagination="changePagination"
      @single-handle="changeSingleHandle"
    >
      <template v-slot:header>
        <c-search :form-model="searchObj" :form-items="searchItems" @submit-form="searchSubmit" @reset-form="searchReset"></c-search>
      </template>
    </c-table>
  </div>
</template>

<script>
import mixinTable from 'mixins/table'
import utils from 'utils'

export default {
  mixins: [mixinTable],
  props: {
    initData: {
      type: Object,
      default() {
        return []
      }
    }
  },
  data(vm) {
    return {
      curParkInfo: '',
      tableList: [],
      tableInnerBtns: [],
      tableHeader: [
        {
          label: '所属城市',
          prop: 'cityName'
        },
        {
          label: '所属区域',
          prop: 'areaName'
        },
        {
          label: '网点名称',
          prop: 'parkName',
          search: {
            type: 'input'
          }
        },
        {
          label: '网点地址',
          prop: 'parkAddress',
          width: 300
        },
        {
          label: '网点类型',
          prop: 'parkType',
          formatter: row => row && vm.setTableColumnLabel(row.parkType, vm.typeList)
        },
        {
          label: '合作类型',
          prop: 'isCooperation',
          formatter: row => row && vm.setTableColumnLabel(row.isCooperation, 'cooperationTypeList')
        },
        {
          label: '停车费(天/元)',
          prop: 'parkDayMoney'
        },
        {
          label: '责任人',
          prop: 'dutyPerson'
        },
        {
          label: '状态',
          prop: 'isTemporary',
          setColor: row => (row.isTemporary === 0 ? 'red' : ''),
          formatter: row => row && vm.setTableColumnLabel(row.isTemporary, 'disabledStatus')
        },
        {
          label: '网点描述',
          prop: 'remark'
        }
      ]
    }
  },
  created() {
    this.getTypeList()
  },
  methods: {
    fetchData() {
      const { pageNo, pageSize } = this.pageInfo
      const { dateTime, ...other } = this.searchObj
      const searchDate = this.getSearchDate(dateTime)
      this.isLoading = true
      this.$api.outlets
        .fetch('parkList', {
          ...searchDate,
          ...other,
          rows: pageNo,
          offset: pageSize
        })
        .then(res => {
          this.isLoading = false
          if (res && res.totalCount) {
            const { data, totalCount } = res
            this.pageInfo.totalNum = totalCount
            data.forEach(val => {
              val.parkDayMoney = utils.formatMoney(val.parkDayMoney)
            })
            this.tableList = data || []
          } else {
            this.tableList = res || []
          }
        })
    },
    getTypeList() {
      this.$api.outlets
        .fetch('parkCategoryList', {
          rows: 1,
          offset: 20
        })
        .then(res => {
          const typeList = res.map(res => ({ label: res.name, value: res.id }))
          this.typeList = typeList
          this.fetchData()
        })
    },
    changeSingleHandle(item) {
      this.curParkInfo = item
    }
  }
}
</script>
<style lang="less" scoped>
.main {
  .header {
    margin-bottom: 20px;
    font-size: 16px;
  }
}
</style>
